<template>
  <div class="userCenter">
    <div class="tabs">
      <span @click="clickTab(1)" :class="{ active: num === 1 }">个人信息</span>
      <span @click="clickTab(2)" :class="{ active: num === 2 }">修改密码</span>
    </div>
  </div>
  <UserInfo v-if="num === 1"></UserInfo>
  <Pwassd v-if="num === 2"></Pwassd>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Pwassd from './components/pwd.vue'
import UserInfo from './components/userInfo.vue'
const num = ref<Number>(1)
const clickTab = (value) => {
  num.value = value
}
</script>
<style scoped lang="scss">
.userCenter {
  position: relative;
  .tabs {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;
    span {
      margin: 0 20px;
      cursor: pointer;
    }
    .active {
      color: #388ce9;
    }
  }
}
</style>
